<template>
    <el-pagination
        background
        :current-page.sync="pageNum"
        :page-sizes="pageSizes"
        :page-size.sync="+nosize?+nosize:sizes?sizes:pageSize"
        :layout="noSizes?noSizes:((nosize||nosize!=null)?'':'sizes,')+'total, prev, pager, next, jumper'"
        :total="+total || 0"
        @size-change="Change"
        @current-change="Change"
    />
</template>

<script>
export default {
    components: {},
    model: {
        props: 'pageNum',
        event: 'changePageNum'
    },
    props: {
        total: [String, Number],
        noSizes: String,
        nosize: {
            default: null
        },
        pageSizes: {
            type: Array,
            default: () => [20, 50, 100, 200]
        },
        sizes: Number,
        init: String
    },
    data () {
        return {
            pageSize: 20,
            pageNum: 1
            // total: 500
        }
    },
    computed: {},
    watch: {
        // 修复切换选项卡的时候，分页不为1的bug
        init (val) {
            this.pageNum = 1
        },
        initPageNum (val) {
            this.pageNum = val
        }
    },
    created () {},
    mounted () {

    },
    methods: {
        Change () {
            this.$emit('change', {
                pageSize: this.pageSize,
                pageNum: this.pageNum
            })
        }
    }
}
</script>

<style scoped lang="stylus">
.el-pagination
    margin-top: 2rem
    text-align: right
    ::v-deep .el-input__inner
        border-radius: 4px
    ::v-deep li
        background-color: transparent !important
        border: 1px solid #DCDFE6
        &.active
            color: #3399FF !important
            border-color: @color
</style>
